<!DOCTYPE html>
<html>

<?php

use Wgx\Admin\Com\AdminMenuRightsUtil;
use Wgx\Admin\Com\Crud\Crud;
use Wgx\Admin\Com\Crud\CrudField;
use PhpYes\Apps;

/** @var Crud $crud */
$crud = empty($this->data['crud']) ? null : $this->data['crud'];
if (empty($crud)) {
    throw new \InvalidArgumentException('请传递crud');
}

?>

<head>
  <?php require \PhpYes\Apps::render()->getPage('admin_page_parts/meta.html.php'); ?>
  <title>
    <?php
    $prefix = \PhpYes\Apps::getAdminPageTitlePrefix();
    $menuName = '';
    $currMenu = AdminMenuRightsUtil::getSingleObj()->getCurrentMenu();
    if ($currMenu) {
        $menuName = $currMenu->getName();
    }
    $opName = '查看';
    $pageTitle = "{$prefix} - {$menuName} - {$opName}";
    echo $pageTitle;
    ?>
  </title>
  <meta name="description" content="index" />
  <link rel="stylesheet" href="/wgx_admin_static/fontawesome/5.3.1/css/all.min.css" />
  <?php
  $cssFileMap = $crud->getFileMap(Crud::PageReadPage, Crud::FileCssFile);
  if ($cssFileMap) {
      foreach ($cssFileMap as $file => $flag) {
          if ($flag) {
              echo '<link rel="stylesheet" href="' . $file . '" />' . "\n";
          }
      }
  }
  ?>
  <style>
    <?php require \PhpYes\Apps::render()->getPage('admin_page_parts/topbar_inline.css'); ?>

    div.page-main-content {
      margin: 30px;
    }
    div.page-main-content .content_line {
      margin-top: 10px;
    }
    div.page-main-content .content_line label {
      margin-right: 10px;
    }
    div.page-main-content .content_line .inline-tips {
      display: inline-block;
      max-width: 20em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 10px;
      font-size: 0.8em;
      font-style: italic;
      color: gray;
      vertical-align: bottom;
    }
    div.page-main-content .content_line .popup-tips-indicator {
      margin-left: 10px;
      color: #65BCDA;
    }

    <?php
    $cssInlineFileMap = $crud->getFileMap(Crud::PageReadPage, Crud::FileCssInline);
    if ($cssInlineFileMap) {
        foreach ($cssInlineFileMap as $file => $flag) {
            if ($flag) {
                require $file ;
            }
        }
    }
    ?>
  </style>
</head>

<body>
  <?php
  $this->data['pageTitle'] = $pageTitle;
  require \PhpYes\Apps::render()->getPage('admin_page_parts/topbar_inline.html.php');
  ?>
  <div id="main-container" class="main-container">
    <div id="page-main-content" class="page-main-content">
    <?php
    $fieldMap = $crud->getFieldMap();
    /**
     * @var string $fieldName
     * @var CrudField $field
     */
    foreach ($fieldMap as $fieldName => $field) {
        $showIn = intval($field->getShowIn());
        if (($showIn & CrudField::ShowInReadPage) < 1) {
            continue;
        }

        $fieldVal = isset($this->data['data']) && isset($this->data['data'][$fieldName]) ? $this->data['data'][$fieldName] : '';

        $tips = $field->getTips();
        $tips = empty($tips) ? null : trim($tips);
        $tipsHtml = '';
        if ($tips) {
            $tipsHtml = '<span class="inline-tips"># ' . htmlspecialchars($tips, ENT_QUOTES | ENT_HTML5) . '</span>';
            if (mb_strlen($tips) >= 20) {
                $tipsHtml .= '<i class="fas fa-info-circle popup-tips-indicator"></i>';
            }
        }
        echo '<div class="content_line field_' . trim($fieldName) . '"'
            . ' data-fieldname="' . $fieldName . '"'
            . ' data-hname="' . $field->getHName() . '"'
            . ' data-origval="' . (empty($fieldVal) ? $fieldVal : htmlspecialchars($fieldVal, ENT_QUOTES | ENT_HTML5)) . '"'
            . '>'
            . '<label>' . $field->getHName() . ':</label>'
            . '<span>' . $fieldVal . '</span>'
            . $tipsHtml
            . '</div>' . "\n";
    }
    ?>
    </div>
  </div>

  <script src="/wgx_admin_static/jquery-3.6.1.min.js"></script>
  <script src="/wgx_admin_static/layer/3.5.1/layer.js"></script>
  <?php
  $jsFileMap = $crud->getFileMap(Crud::PageReadPage, Crud::FileJsFile);
  if ($jsFileMap) {
      foreach ($jsFileMap as $file => $flag) {
          if ($flag) {
              echo '<script src="' . $file . '"></script>' . "\n";
          }
      }
  }
  ?>
  <script>
    jQuery(function ($) {
      var tipsLayerIdx = 0, tipsLayerField = null;
      $('#page-main-content').on('mouseenter', '.content_line .popup-tips-indicator', function (e) {
        e.preventDefault();
        e.stopPropagation();

        var tips = $(this).prev('.inline-tips').html();
        tips = tips && tips.trim() || null;
        if (!tips) {
          return;
        }
        if (tips[0] == '#') {
          tips = tips.substring(1).trim();
        }

        var contentLine = $(this).closest('.content_line');
        var fieldName = contentLine.data('fieldname');
        fieldName = fieldName && fieldName.trim() || null;
        if (!fieldName) {
          return;
        }

        if (tipsLayerField && tipsLayerField == fieldName) {
          return;
        }

        if (tipsLayerField) {
          layer.close(tipsLayerIdx);
          tipsLayerField = null;
          tipsLayerIdx = 0;
        }

        tipsLayerIdx = layer.tips(tips, this, {
          skin: 'field-popup-tips',
          area: '20em',
          closeBtn: 1,
          time: 0,
          tips: [2, 'rgba(0,0,0,0.5)'],
          success: function (layerDomObj, idx) {
            var jLayerDomObj = $(layerDomObj);
            var bgColor = jLayerDomObj.find('.layui-layer-content').css('background-color');
            jLayerDomObj.find('i.layui-layer-TipsG').css('border-bottom-color', 'transparent');
            jLayerDomObj.find('i.layui-layer-TipsR').css('border-right-color', bgColor).css('left', '-15px').css('top', '0px');
            jLayerDomObj.find('i.layui-layer-TipsL').css('border-left-color', bgColor).css('right', '-15px').css('top', '0px');
          },
          cancel: function (idx, layerDomObj) {
            tipsLayerField = null;
            tipsLayerIdx = 0;
          }
        });
        tipsLayerField = fieldName;
      });
      $('body').on('click', '.layui-layer-tips.field-popup-tips', function (e) {
        e.preventDefault();
        e.stopPropagation();
      });
      $('body').on('click', function (e) {
        if (tipsLayerField) {
          layer.close(tipsLayerIdx);
          tipsLayerField = null;
          tipsLayerIdx = 0;
        }
      });
    });
    <?php
    $jsInlineFileMap = null;
    $jsInlineFileMap = $crud->getFileMap(Crud::PageReadPage, Crud::FileJsInline);
    if ($jsInlineFileMap) {
        foreach ($jsInlineFileMap as $file => $flag) {
            if ($flag) {
                require $file;
            }
        }
    }
    ?>
  </script>
</body>

</html>